<template>
  <transition name="popup">
    <div
      class="confirm-wrapper"
      v-show="showConfirm"
      @click.stop
      >
      <div class="confirm">
        <div class="title" v-show="title">{{title}}</div>
        <div class="center">{{text}}</div>
        <div class="footer">
          <div
            class="left-btn"
            @click="cancelBtnClick"
            >
            {{cancelBtn}}
          </div>
          <div
            class="right-btn"
            @click="okBtnClick"
            >
            {{okBtn}}
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'confirm',
  props: {
    title: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    okBtn: {
      type: String,
      default: '确定'
    },
    cancelBtn: {
      type: String,
      default: '取消'
    }
  },
  data () {
    return {
      showConfirm: false
    }
  },
  methods: {
    show () {
      this.showConfirm = true
    },
    hide () {
      this.showConfirm = false
    },
    cancelBtnClick () {
      this.hide()
      this.$emit('cancel')
    },
    okBtnClick () {
      this.hide()
      this.$emit('ok')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .confirm-wrapper {
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    background: $color-background-d
    display: flex
    flex-direction: column
    justify-content: center
    .confirm {
      width: 60%
      margin: 0 auto
      border-radius: 10px
      background: $color-highlight-background
      text-align: center
      font-size: $font-size-medium
      color: $color-text-ll
      .title {
        padding: 10px
        line-height: 24px
        border-bottom: 1px solid $color-dialog-background
      }
      .center {
        padding: 10px
        line-height: 24px
        border-bottom: 1px solid $color-dialog-background
      }
      .footer {
        position: relative
        padding: 10px 0
        div {
          width: 50%
          display: inline-block
        }
        &::before {
          position: absolute
          top: 0
          left: 50%
          display: inline-block
          content: ''
          width: 1px
          height: 34px
          background: $color-dialog-background
        }
      }
    }
  }

  .popup-enter, .popup-leave-to {
    opacity: 0
  }
  .popup-enter-active, .popup-leave-active {
    transition: all .4s
    animation: popup .4s
  }

  @keyframes popup {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
